import React, { Component } from 'react';
import Rate from 'antd/lib/rate';
import 'antd/lib/rate/style/css';
import {
  NavBar,
  Icon,
  SearchBar,
  List,
  Card,
  WingBlank,
  WhiteSpace,
  Badge
} from 'antd-mobile';
import axios from 'axios';
import './App.css';

const Item = List.Item;

class App extends Component {
  title = '经销商门店推荐的销售经理';
  state = {
    data: [
      {
        id: 92,
        userId: 'jxsdbqsz00005',
        name: '钱核',
        position: '服务总监',
        mobile: '13775288029',
        department: 10001261,
        gender: 1,
        qrCode:
          'http://open.work.weixin.qq.com/wwopen/userQRCode?vcode=vc2ee606674c919b1b',
        email: '',
        avatar:
          'http://p.qlogo.cn/bizmail/BCcMRvUxqIvyGphTH1CVS2nq1YDnlqtgSdzdc47EIurpMROjSP6ZmQ/0',
        englishName: null,
        countCustomer: 0,
        score: {
          id: 1,
          attitude: 3,
          profession: 3,
          response: 4,
          totalScore: 3
        },
        shopId: 10000187
      }
    ]
  };
  render() {
    let { data } = this.state;

    console.log('====================================');
    console.log('经销商人员信息', data);
    console.log('====================================');
    let firstMember = data && data[0];
    console.log('====================================');
    console.log(firstMember);
    console.log('====================================');
    return (
      <div className="App">
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => window.history.back()}
        >
          {this.title}
        </NavBar>
        <WingBlank size="lg">
          <WhiteSpace size="lg" />
          {firstMember && (
            <Card full>
              <Card.Header
                title={
                  <div>
                    <div>{firstMember.name}</div>
                    <Badge
                      text={firstMember.position}
                      style={{
                        padding: '0 3px',
                        display: 'block',
                        backgroundColor: '#f19736',
                        borderRadius: 2
                      }}
                    />
                  </div>
                }
                thumb={
                  <img
                    width="64"
                    height="64"
                    src={firstMember.avatar}
                    style={{ borderRadius: '50%' }}
                  />
                }
                extra={<span>{firstMember.mobile}</span>}
              />
              <Card.Body>
                <div
                  style={{
                    fontSize: '22px'
                  }}
                >
                  已服务{firstMember.countCustomer}名顾客
                </div>
                <List>
                  <Item>
                    综合评分{' '}
                    <Rate
                      style={{ float: 'right' }}
                      disabled
                      defaultValue={firstMember.score.totalScore}
                    />
                  </Item>
                  <Item>
                    服务态度{' '}
                    <Rate
                      style={{ float: 'right' }}
                      disabled
                      defaultValue={firstMember.score.attitude}
                    />
                  </Item>
                  <Item>
                    专业知识{' '}
                    <Rate
                      style={{ float: 'right' }}
                      disabled
                      defaultValue={firstMember.score.profession}
                    />
                  </Item>
                  <Item>
                    反馈及时度{' '}
                    <Rate
                      style={{ float: 'right' }}
                      disabled
                      defaultValue={firstMember.score.response}
                    />
                  </Item>
                </List>
                <img src={firstMember.qrCode} alt="二维码" />
              </Card.Body>
            </Card>
          )}
        </WingBlank>
      </div>
    );
  }

  handleSearch(val) {
    console.log('====================================');
    console.log('搜索条件', val);
    console.log('====================================');
    axios('https://haipengwandou.mynatapp.cc/shop/search', {
      params: { shopAddressKeyword: val }
    }).then(res => {
      console.log('====================================');
      console.log('搜索接口返回结果', res);
      console.log('====================================');
    });
  }

  componentDidMount() {
    document.title = this.title;
    // this.fetchData();
  }

  async fetchData() {
    let location = await this.getLocation();
    let userLongtitude = '113.406246';
    let userLatitude = '23.110533';
    if (location) {
      let { userLatitude, userLongtitude } = location;
      console.log('====================================');
      console.log('当前地理位置：', userLatitude, userLongtitude);
      console.log('====================================');
      axios
        .get('https://haipengwandou.mynatapp.cc/shop/recommend', {
          params: location
        })
        .then(res => {
          console.log('====================================');
          console.log('定位接口返回结果', res);
          console.log('====================================');
        });
    } else {
      axios('https://haipengwandou.mynatapp.cc/shop/recommend', {
        params: { userLongtitude, userLatitude }
      }).then(res => {
        console.log('====================================');
        console.log('打底定位接口返回结果', res);
        console.log('====================================');
      });
    }
  }

  async getLocation() {
    if (window.navigator.geolocation) {
      window.navigator.geolocation.getCurrentPosition(position => {
        return {
          userLatitude: position.coords.latitude,
          userLongtitude: position.coords.longitude
        };
      });
    } else {
      console.log('====================================');
      console.log('浏览器不支持地理定位。');
      console.log('====================================');
    }
  }
}

export default App;
